import Link from 'next/link';
import { Box, HStack, Text, Image } from '@chakra-ui/react';
import { MdMovie } from 'react-icons/md';
import { baseURL } from '../axiosConfig';
import axios from 'axios';

export default function Movie({ data }) {
  return (
    <Box maxW="1200px" mx="auto" mt="20px">
      <HStack lineHeight="24px">
        <MdMovie fontSize="24px" />
        <Text as="h3" fontSize="16px">电影</Text>
      </HStack>
      <HStack mt="20px" spacing="13.33px">
        {
          data.map(item => (
            <Link href="/detail/[id]" as={`/detail/${item.vid}`} key={item.id}>
              <Box w="290px">
                <Image src={item.url} />
                <Text fontSize="14px">{item.title}</Text>
              </Box>
            </Link>
          ))  
        }
      </HStack>
    </Box>
  );
};

export const loadMovie = () => {
  return axios.get('/api/movie', { baseURL });
}